<template>
  <div class="home_header">
      <div class="header_left" @click="handleCloseWindow">
        <em class="iconfont icon-zuojiantou" />
      </div>
      <div class="header_right">
        <div class="header_right_container">
          <ul class="rh_list">
            <li v-for="rhItem in rhList" :key="rhItem.id" :class="['rh_item',$store.state.rhPlate === rhItem.id ? 'active_hd' : '']" :id="rhItem.id" @click="handleHeaderSwitch(rhItem.id)">
              <div class="rh_logo_icon">
                <em :class="['iconfont',rhItem.icon]" />
              </div>
              <span style="margin-left: 3px; font-weight: bold">{{ rhItem.name }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="calender">
        <em class="iconfont icon-rili" @click.stop="handleCalendar"/>
      </div>
  </div>
</template>

<script>
import slidingScrollBar from "@/utils/slidingScrollBar";
import API from "@/api/api-chat-list";
import {isNotEmpty} from "@/common/util";
import dayjs from "dayjs";

const TIMER = 1000; // 倒计时时间（ms）
export default {
    name: 'HomeHeader',
    data(){
      return {
        rhList: [
          {
            id: 'ZC',
            name: '智查',
            icon: 'icon-chaxun'
          },
          {
            id: 'ZX',
            name: '智学',
            icon: 'icon-xuewei'
          },
          {
            id: 'ZB',
            name: '智办',
            icon: 'icon-shu'
          },
          {
            id: 'ZS',
            name: '智说',
            icon: 'icon-qipao'
          }
        ]
      }
    },
    methods: {
      // 首页头部关闭按钮
      handleCloseWindow(){
        MXWebui.closeWindow();
      },
      // 头部导航栏切换，记录id
      handleHeaderSwitch(id){
        const dom = document.getElementById('home_con');
        this.$store.commit('setRhScrollTop',dom.scrollTop);
        this.$store.commit('setRhPlate',id);
        this.$nextTick(() => {
          //滚动到以前记录的位置
          const sTop = this.$store.state.rhScrollTop[id];
          slidingScrollBar( sTop, 'instant');
        });
      },
      // 日历
      async handleCalendar() {
        // 初始化数据
        this.$store.state.meetingInfoMap = new Map();

        const meetingRes = await API.findMeetingDatesByUserId();
        const meetings = meetingRes.data;


        // 没有会议信息什么都不做
        if (isNotEmpty(meetings)) {
          //将会议信息转为Map<String, [meeting1, meeting2]> 格式
          meetings.forEach(meeting => {
            const meetingDate = meeting.meetingDate.split(" ")[0];
            const dateMeetings = this.$store.state.meetingInfoMap.get(meetingDate) || [];
            this.$store.state.meetingInfoMap.set(meetingDate, [...dateMeetings, meeting]);
          });
        }

        const show = this.$store.state.calendarShow;
        this.$store.commit('setCalendarShow', !show);

        this.$store.state.chooseDate = dayjs();

        if (this.$store.state.autoDsImgDisplay) {
          this.$store.state.imgDisplay = true;

          // 设置定时器
          this.$store.state.timerId = setInterval(() => {
            this.$store.state.autoCloseTimer -= 1;
            if (this.$store.state.autoCloseTimer <= 0) {
              this.autoClearInterval();
            }

          }, TIMER)
        }
      },
      autoClearInterval() {
        this.$store.state.autoDsImgDisplay = false;
        this.$store.state.imgDisplay = false;
        clearInterval(this.$store.state.timerId);
        this.$store.state.timerId = null;
      }
    }
}
</script>

<style scoped>
@import url('~@/assets/css/home/homeHeader.css');
</style>
